<script setup>
import { getWarehouseBoardYjcb } from '@/api/visual/warehouseBoard'
import moment from 'moment'

const currentYear = moment().year()
const months = ref([])
const optionData = ref(0)
const date = ref(moment().format('YYYYMM'))
const option = computed(() => ({
  title: [
    {
      // 图表标题
      top: '3%',
      text: '存货周转率',
      textStyle: {
        color: '#fff'
      }
    }
  ],

  series: [
    {
      type: 'gauge', // 仪表盘类型
      name: '本月', // 用于tooltip的显示
      startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
      endAngle: -270, // 仪表盘结束角度
      center: ['40%', '50%%'], // 中心点（圆心坐标）
      radius: '80%', // 圆大小（仪表盘半径）
      clockwise: true, // 仪表盘刻度是否是顺时针增长
      // 仪表盘轴线相关配置
      axisLine: {
        show: true,
        roundCap: false, // 两端显示成圆形（背景环）
        clip: false, // 是否裁剪超出部分
        // 设置背景圆环样式
        lineStyle: {
          width: 10, // 圆环宽度
          color: [[1, '#002865']] // 圆环背景色
        }
      },
      // 仪表盘指针
      pointer: {
        show: false
      },
      // 进度设置
      progress: {
        show: true,
        overlap: false, // 多组数据时进度条是否重叠
        roundCap: true, // 是否在两端显示成圆形
        clip: false, // 是否裁掉超出部分
        // 进度条样式
        itemStyle: {
          borderWidth: 0,
          shadowColor: '',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#62bb86' // 0% 处的颜色  '#02C77E'
              },
              {
                offset: 1,
                color: '#62bb86' // 100% 处的颜色  '#017770'
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      // 仪表盘分割线
      splitLine: {
        show: false
      },
      // 刻度样式
      axisTick: {
        show: false
      },
      // 刻度标签
      axisLabel: {
        show: false
      },
      title: {
        show: true,
        fontSize: 16,
        offsetCenter: ['0', '140%'],
        color: '#fff'
      },
      detail: {
        // width: 50,
        // height: 14,
        fontSize: 14,
        color: 'auto'
      },
      data: [
        {
          value: optionData.value,
          detail: {
            // 中心title设置
            offsetCenter: ['0%', '0%'],
            color: '#01F8FF',
            formatter: '{value}%'
          }
        }
      ]
    }
  ]
}))

const loadData = async () => {
  const { data } = await getWarehouseBoardYjcb({ date: date.value })
  optionData.value = data
}

onMounted(loadData)

onMounted(() => {
  for (let month = 1; month <= 12; month++) {
    const value = moment(`${currentYear}-${month}`, 'YYYY-M').format('YYYYMM')
    const label = moment(`${currentYear}-${month}`, 'YYYY-M').format('YYYY年MM月')
    months.value.push({ value, label })
  }
})
</script>

<template>
  <div class="ps_w_h_100" style="position: relative">
    <ps-chart2 :option="option"></ps-chart2>

    <div class="chart-select-container">
      <select class="chart-select" v-model="date" @change="loadData">
        <option v-for="item in months" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chart-select-container {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
